<template>
	<view class="page">
		<view class="nav-style" :style="{ height: navHeight + 'px', 'padding-top': statusBarHeight + 'rpx' }">
			<image class="small-logo" src="https://yun.shlxkj.info:44300/艾瑞测/小程序/static/img/small-logo.png" mode="aspectFit"></image>
		</view>
		<div class="content" :style="{ 'padding-top': statusBarHeight + 'rpx' }">
			<view class="welcome">欢迎使用艾瑞测！</view>
			<view class="sub-title">登录后更精彩，美好即将开始！</view>
			<view class="logo-wrap">
				<image class="logo" src="https://yun.shlxkj.info:44300/艾瑞测/小程序/static/img/device.png" mode="aspectFit" />
			</view>
			<button class="login" type="primary" open-type="getUserInfo" :disabled="authLoading" @getuserinfo="getUserInfo">登录</button>
			<view class="agree-wrap agree">
				<view style="display: flex; align-items: center" @click="agreeChange">
					<image
						class="radio"
						:src="
							agree === '0'
								? 'https://yun.shlxkj.info:44300/艾瑞测/小程序/static/img/checkbox.png'
								: 'https://yun.shlxkj.info:44300/艾瑞测/小程序/static/img/checkbox-active.png'
						"
						mode="aspectFit"
					/>
					<text class="">同意</text>
				</view>
				<text class="link" @click="goAgreement">《用户协议》</text>
				与
				<text class="link" @click="goPrivacy">《隐私政策》</text>
			</view>
			<view class="agree-wrap agree" style="margin-left: 40%;color: #2955cc;margin-top: 20%;" @click="youke"> 
			  游客登录
			</view>
		</div>
		<copyright />
		<uni-popup ref="popup" type="bottom" class="popup-height" background-color="#fff">
			<view class="register-popup">
				<view class="tips">温馨提示</view>
				<view class="allow-wrap">
					<view class="no-register">检测到您还未注册账号</view>
					<view class="allow">为了方便我们与您联系，请允许我们获取您的手机号码</view>
				</view>
				<view class="btn-wrap">
					<button class="phone-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" type="primary">手机号快捷登录</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="agreement" type="center" style="border-radius: 26rpx">
			<view class="agreement-height">
				<image class="agree-bg" src="https://yun.shlxkj.info:44300/艾瑞测/小程序/static/img/agree-box.png" mode="widthFix"></image>
				<view class="login-content">
					<mp-html :content="content" />
					<view class="agreement-btn-wrap">
						<button class="refuse-btn" @click="onRefuse">拒绝</button>

						<button id="agree-btn" class="ok-btn" @click="handleAgreePrivacyAuthorization" open-type="agreePrivacyAuthorization">同意并继续</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import Copyright from '@/components/copyright/index.vue';
import { getDictionaryByType, Shipment,createUser, Base64_theone } from '@/utils/api.js';
import MpHtml from '@/components/mp-html/mp-html';
export default {
	name: 'Login',
	components: {
		Copyright,
		MpHtml
	},
	data() {
		return {
			gps: false,
			authLoading: false,
			authPhoneLoading: false,
			isNeedScan: false,
			agree: '0',
			content: '',
			navHeight: '',
			statusBarHeight: ''
		};
	},
	onLoad(query) {
		let { statusBarHeight, system } = uni.getSystemInfoSync();
		this.statusBarHeight = statusBarHeight;
		this.navHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 44 : 48);
	
		console.log('原始链接', query);
		// 获取到二维码原始链接内容
		const q = decodeURIComponent(query.q);
		console.log('用户直接扫描设备码链接', q);
	
		if(q=='undefined'){
			return
		}else{
			// 最简方法 - 假设参数顺序固定
			const params = q.split('?')[1].split('&');
			const scanMac = params[0].split('=')[1];
			const deviceNumber = params[1].split('=')[1];
			
			this.$store.commit('$uStore', {
				name: 'scanMac',
				value: scanMac
			});
			this.$store.commit('$uStore', {
				name: 'deviceNumber',
				value: deviceNumber
			});
			console.log('用户直接扫描设备码scanMac',  this.$store.state.scanMac);
			console.log('用户直接扫描设备码deviceNumber', this.$store.state.deviceNumber);
		}
	},
	onShow() {
		
	
	},
	methods: {
		youke(){
			uni.reLaunch({
				url: '/pages/home/index'
			});
			this.$store.commit('$uStore', {
				name: 'youke',
				value: true
			});
		},
		 getData() {
			uni.showLoading({
				title: 'loading'
			});
			getDictionaryByType({
				Type: 'UserAgreement'
			})
				.then((res) => {
					if (res.code == 200) {
						uni.hideLoading();
						this.content = decodeURIComponent(res.data[0].value).replace(/\+style/g, ' style');
						this.$refs.agreement.open('center');
					}
				})
				.catch((error) => {
					console.error('请求失败', error);
					// 在这里处理请求失败的逻辑
					uni.showToast({
						title: '服务器异常',
						icon: 'error'
					});
				});
		},
		onScan() {
			console.log(this.$store.state);
			console.log(this.$store.state.vx_u_info.Phone);
			// uni.scanCode({
			// 	success: async (res) => {
			// 		if (res.result && res.result.includes('mac_id')) {
			// 			const params = res.result.split('?')[1]
			// 			const mac_id = params.split('=')[1]
			// 			const {
			// 				Phone
			// 			} = this.$store.state.vx_u_info
			// 			try {
			// 				const response = await Shipment({
			// 					Phone,
			// 					mac_id
			// 				})
			// 				console.log(response)
			// 				if (response.Code === 200) {
			// 					uni.showToast({
			// 						title: '出货成功',
			// 						icon: 'success'
			// 					})
			// 				} else {
			// 					uni.showToast({
			// 						title: response.Message || '请稍后再尝试',
			// 						icon: 'none'
			// 					})
			// 				}
			// 				uni.navigateTo({
			// 					url: '/pages/welcome/index'
			// 				})
			// 			} catch (error) {
			// 				console.log(error)
			// 			}
			// 		} else {
			// 			uni.showModal({
			// 				title: '提示',
			// 				content: '请扫描正确的二维码',
			// 				success: (res) => {
			// 					if (res.confirm) {
			// 						this.onScan()
			// 					} else if (res.cancel) {
			// 						uni.navigateTo({
			// 							url: '/pages/welcome/index'
			// 						})
			// 					}
			// 				}
			// 			})
			// 		}
			// 	}
			// })
			uni.scanCode({
				success: async (res) => {
					console.log(res);
					let base64 = res.result;
					let data = {
						content: base64
					};
					const response = await Base64_theone(data);
					console.log(response);
					if (response.Data.includes('上海量欣科技有限公司-静安VCT门诊')) {
						let address = response.Data.split('-')[1];
						console.log(address);
						uni.navigateTo({
							url: `/pages/receive/index?address=${address}`
						});
					} else {
						uni.showModal({
							title: '提示',
							content: '请扫描正确的二维码',
							success: (res) => {
								if (res.confirm) {
									this.onScan();
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				}
			});
		},
		getUserInfo(e) {
			if (this.agree === '0') {
				uni.showToast({
					title: '请先同意用户协议和隐私政策',
					icon: 'none'
				});
				return;
			}
			uni.login({
				provider: 'weixin',
				success: (res) => {
					console.log(res);
					if (res.code) {
						this.$store.dispatch('$dRegister', res.code).then((res2) => {
							console.log('res2', res2);
							if (res2.type === false) {
								this.$refs.popup.open('bottom');
							} else if (res2.type === true) {
								this.$store.commit('$uStore', {
									name: 'youke',
									value: false
								});
								uni.reLaunch({
									url: '/pages/home/index'
								});
							}
						});
					}
				}
			});
		},
	
		async getPhoneNumber(e) {
			console.log(e, '测试');
			let obj = e.detail || e;
			// console.log(e);
			if (obj.errMsg === 'getPhoneNumber:ok') {
				this.$store.dispatch('$dGetPhone', obj).then((data) => {
					console.log('一键登录后台接口返回:', data);
					createUser(data).then((res) => {
						console.log(res);
						this.$store.commit('$uStore', {
							name: 'vx_u_info',
							value: res.data
						});
						if (res.code == 200) {
							this.getUserInfo();
							this.$store.commit('$uStore', {
								name: 'youke',
								value: false
							});
							uni.reLaunch({
								url: '/pages/home/index'
							});
						} else {
							uni.showToast({
								title: '注册失败~'
							});
						}
					});
				});
			} else {
				uni.showToast({
					title: '您拒绝了授权,注册失败~'
				});
			}
		},
		onClose() {
			this.authLoading = false;
		},
		async agreeChange() {
			console.log(this.agree);
			if (this.agree === '0') {
				if (!this.content) {
					await this.getData();
				} else {
					this.$refs.agreement.open('center');
				}
			}
		},
		goAgreement() {
			uni.navigateTo({
				url: '/pages/agreement/index'
			});
		},
		goPrivacy() {
			uni.navigateTo({
				url: '/pages/privacy/index'
			});
		},
		goConsent() {
			uni.navigateTo({ url: '/pages/consent/index' });
		},
		handleAgreePrivacyAuthorization() {
			this.$refs.agreement.close();
			this.agree = '1';
			console.log('用户点击同意');
			wx.getPrivacySetting({
				success: (res) => {
					console.log(res); // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
					if (res.needAuthorization) {
						// 需要弹出隐私协议
						console.log('需要弹出隐私协议');
						this.getData();
						this.$refs.agreement.open('center');
					} else {
						// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
						console.log('用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口');
					}
				}
				// fail: () => {},
				// complete() => {}
			});
		},
		onRefuse() {
			this.$refs.agreement.close();
			this.agree = '0';
		},
	}
};
</script>

<style lang="scss" scoped>
.page {
	.nav-style {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1000;
		display: flex;
		padding-left: 23rpx;
		align-items: center;

		.small-logo {
			position: absolute;
			width: 100rpx;
			height: 35rpx;
			left: 45%;
		}
	}

	.content {
		margin-top: 203rpx;
		padding: 0 64rpx;
	}

	.welcome {
		margin-top: 100rpx;
		font-size: 46rpx;
		font-weight: bold;
		color: #323232;
		line-height: 46rpx;
	}

	.sub-title {
		margin-top: 30rpx;
		font-size: 27rpx;
		color: #666666;
		line-height: 60rpx;
	}

	.logo-wrap {
		width: 436rpx;
		height: 168rpx;
		margin: 163rpx auto 0;

		.logo {
			width: 436rpx;
			height: 168rpx;
		}
	}

	.login {
		margin-top: 182rpx;
		width: 465rpx;
		height: 85rpx;
		background: #1e64e1;
		border-radius: 15rpx;
	}

	.phone-login {
		margin-top: 30rpx;
		border-radius: 46rpx;
		color: #aaaaaa;
		border: 1rpx solid #aaaaaa;
	}

	.agree {
		color: #a7a6a6;
		font-size: 27rpx;
		font-weight: 400;

		.link {
			color: #2955cc;
		}
	}
}

.popup-height {
	height: 40vh;
}

.register-popup {
	height: 40vh;
	padding: 30rpx;

	.tips {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
	}

	.btn-wrap {
		margin: 30rpx auto;
		display: flex;
		justify-content: center;
	}

	.phone-btn {
		margin-top: 50rpx;
	}

	.no-register {
		font-size: 28rpx;
		color: #3b4144;
	}

	.allow-wrap {
		margin-top: 60rpx;
		text-align: center;
	}

	.allow {
		font-size: 28rpx;
		margin-top: 20rpx;
		color: #909399;
	}
}

.agree-wrap {
	width: 470rpx;
	margin: 50rpx auto 0;
	display: flex;
	align-items: center;

	.radio {
		width: 27rpx;
		height: 27rpx;
		margin-right: 10rpx;
	}
}

.agreement-height {
	width: 615rpx;
	height: 70vh;
	margin: 0 auto;
	border-radius: 26rpx;
	background-color: #ffffff;
	position: relative;

	.agree-bg {
		width: 615rpx;
		position: absolute;
		z-index: 0;
	}

	.login-content {
		width: 515rpx;
		position: absolute;
		padding: 60rpx 50rpx 0;
		height: calc(100% - 100rpx);
		overflow-y: scroll;
	}

	.agreement-btn-wrap {
		background-color: #ffffff;
		padding-top: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.ok-btn {
			width: 250rpx;
			height: 85rpx;
			line-height: 85rpx;
			background: #1e64e1;
			border-radius: 15rpx;
			text-align: center;
			font-size: 31rpx;
			font-weight: 400;
			color: #ffffff;
		}

		.refuse-btn {
			width: 250rpx;
			height: 85rpx;
			line-height: 85rpx;
			font-size: 31rpx;
			font-weight: 400;
			color: #333333;
			background: #ebebed;
			text-align: center;
			border-radius: 15rpx;
		}
	}
}
</style>
